<template>
	<div class="Info-show">
		<div class="Info-show-warpper">
			<div class="info-header clear">
				<div class="info-add pull-left" @click="add">
					<Button type="success">新增用户</Button>
				</div>
			</div>
			<div class="info-table">
				<info-table ref="info-table" :thead="thead" :tbody="tbody" :total="total"></info-table>
			</div>
		</div>

		<info-modal ref="action-modal" class="user-action-modal" :title="actionTitle">
			<div class="user-form" v-if="roleList.length">
				<Form ref="form" :model="formItem" :rules="rules" :label-width="70">
					<FormItem label="用户名" prop="userName">
						<Input v-model="formItem.userName"></Input>
					</FormItem>
					<FormItem label="密码" prop="password">
						<Input type="password" v-model="formItem.password"></Input>
					</FormItem>
					<FormItem label="角色" prop="roleId">
						<Select v-model="formItem.roleId" @on-change="roleChange">
							<Option v-for="item in roleList" :value="item.id">{{ item.RoleName }}</Option>
						</Select>
					</FormItem>
					<FormItem label="姓名" prop="realName">
						<Input v-model="formItem.realName"></Input>
					</FormItem>
					<FormItem label="部门" prop="departmentId">
						<Input v-model="formItem.departmentId"></Input>
					</FormItem>
					<FormItem label="电话" prop="mobile">
						<Input v-model="formItem.mobile"></Input>
					</FormItem>
					<FormItem label="状态" prop="status">
						<Select v-model="formItem.status">
							<Option value="1">启用</Option>
							<Option value="0">禁用</Option>
						</Select>
					</FormItem>
					<FormItem label="备注" prop="remark">
						<Input type="textarea" v-model="formItem.remark"></Input>
					</FormItem>
					<FormItem>
						<Button type="primary" @click="commitForm">提交</Button>
						<Button type="ghost" @click="resetForm" style="margin-left: 8px">重置</Button>
					</FormItem>
				</Form>
			</div>
		</info-modal>

		<warn-modal title="警告" message="确定要删除该接口？" ref="del-warn" @sure="delCommit"></warn-modal>

		<loading v-show="showLoading"></loading>
	</div>
</template>

<script>
	import { loadingMixin, infoTableMixin, infoModalMixin, warnModalMixin } from 'common/js/mixins';
	import { UserThead } from 'common/js/table';
	import { UserRule } from 'common/js/rules';
	import { successNotice, errorNotice } from 'common/js/dom';
	import { getList, updateList, deleteList } from 'api/User';
	import { getRoleList } from 'api/Role';

	export default {
		mixins: [loadingMixin, infoTableMixin, infoModalMixin, warnModalMixin],
		created() {
			this._getList();
			this._getRoleList();
		},
		data() {
			return {
				roleList: [],
				formItem: {
					id: '',
					userName: '',
					password: '',
					roleId: '',
					realName: '',
					departmentId: '',
					mobile: '',
					status: '1',
					remark: ''
				},
				rules: UserRule(),
				actionTitle: '',
				thead: UserThead(this),
				tbody: [],
				total: 0,
				showLoading: false
			}
		},
		methods: {
			roleChange(id) {
				let index = this.roleList.findIndex(item => item.id === id);
				this.formItem['roleName'] = this.roleList[index].RoleName;
			},
			add() {
				this.resetForm();
				this.actionTitle = '新增用户';
				this.$refs['action-modal'].showModal();
			},
			edit(row) {
				this.formItem = row;
				this.actionTitle = '修改用户';
				this.$refs['action-modal'].showModal();
			},
			commitForm() {
				this.$refs['form'].validate((valid) => {
					if(valid) {
						this._updateList(this.formItem);
					}
				})
			},
			del(row) {
				this.formItem = row;
				this.$refs['del-warn'].showModal();
			},
			delCommit() {
				this._deleteList(this.formItem.id)
			},
			resetForm() {
				this.formItem.id = '';
				this.$refs['form'].resetFields();
			},
			_deleteList(id) {
				this.showLoading = true;
				deleteList(id)
					.then(res => {
						this.showLoading = false;
						this.$refs['info-table'].refresh();
						this.$refs['del-warn'].hideModal();
						successNotice('操作成功');
					}).catch(res => {
						this.showLoading = false;
						errorNotice(res.message);
					})
			},
			_updateList(obj) {
				this.showLoading = true;
				updateList(obj)
					.then(res => {
						this.showLoading = false;
						this.$refs['info-table'].refresh();
						this.$refs['action-modal'].hideModal();
						successNotice('操作成功');
					}).catch(res => {
						this.showLoading = false;
						errorNotice(res.message);
					})
			},
			_getList(page) {
				this.showLoading = true;
				getList(page)
					.then(res => {
						this.tbody = res.rows;
						this.total = res.total;
						this.showLoading = false;
					}).catch(res => {
						this.showLoading = false;
						errorNotice(res.message);
					})
			},
			_getRoleList() {
				this.showLoading = true;
				getRoleList()
					.then(res => {
						this.roleList = res;
						this.showLoading = false;
					}).catch(res => {
						this.showLoading = false;
						errorNotice(res.message);
					})
			}
		}
	}
</script>

<style lang="scss">
	.user-action-modal {
		.ivu-modal {
			width: 400px;			
		}
		.user-form {
			width: 350px;
			margin: 0 auto;
		}
	}
</style>